<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
//获取选中的内容
function getTextFieldSelection(e) {
  if (window.getSelection) {        
   // This technique is the most likely to be standardized.        
   // getSelection() returns a Selection object, which we do not document.        
   return window.getSelection().toString();    
  }else
  if (document.getSelection) {        
   // This is an older, simpler technique that returns a string        
   return document.getSelection();    
  }else
  if (document.selection) {        
   // This is the IE-specific technique.        
   // We do not document the IE selection property or TextRange objects.        
   return document.selection.createRange().text;    
  }else
  if (e.selectionStart != undefined && e.selectionEnd != undefined) {
   var start = e.selectionStart;        
   var end = e.selectionEnd;        
   return e.value.substring(start, end);    
  }else {
   return ""; 
  }// Not supported on this browser }
}
 
//在e元素的当前光标位置插入文本
//var cursPos;
function insertText(e,str) { 
  //var cursPos;     
        //debugger;
        if(!cursPos || cursPos == undefined)TraceCursorPosition(e); // 获取光标位置       
        e.value = e.value.slice(0, cursPos.start) + str + e.value.slice(cursPos.end)
    }  
 
    // 跟踪光标位置
    function TraceCursorPosition(obj)
    {       
        //debugger;
  //var cursPos; 
        cursPos = $CursorPosition(obj);
    }
   
    // 返回光标所在位置
    /**//*
     * source:
     * source:
     * acknowledges for Marshall
     * example:
     * var myTextBox = document.getElementById("MyTextBoxID");
     * var cursPos = $CursorPosition(myTextBox);
     * alert(cursPos.item[0] + " " + cursPos.item[1]);
     * // OR
     * alert(cursPos.start + " " + cursPos.end);   
    */
    function $CursorPosition(textBox){       
        var start = 0, end = 0;
        //如果是Firefox(1.5)的话，方法很简单
        if(typeof(textBox.selectionStart) == "number"){
            start = textBox.selectionStart;
            end = textBox.selectionEnd;
        }
        //下面是IE(6.0)的方法，麻烦得很，还要计算上'\n'
        else if(document.selection) {
            var range = document.selection.createRange();
            if(range.parentElement().id == textBox.id) {
                // create a selection of the whole textarea
                var range_all = document.body.createTextRange();
                range_all.moveToElementText(textBox);
                //两个range，一个是已经选择的text(range)，一个是整个textarea(range_all)
                //range_all.compareEndPoints()比较两个端点，如果range_all比range更往左(further to the left)，则               
                //返回小于0的值，则range_all往右移一点，直到两个range的start相同。
                // calculate selection start point by moving beginning of range_all to beginning of range
                for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)
                    range_all.moveStart('character', 1);
                // get number of line breaks from textarea start to selection start and add them to start
                // ������������\n
                for (var i = 0; i <= start; i ++) {
                    if (textBox.value.charAt(i) == '\n')
                        start++;
                }
                // create a selection of the whole textarea
                var range_all = document.body.createTextRange();
                range_all.moveToElementText(textBox);
                // calculate selection end point by moving beginning of range_all to end of range
                for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++) {
                    range_all.moveStart('character', 1);
                }
                // get number of line breaks from textarea start to selection end and add them to end
                for (var i = 0; i <= end; i ++) {
                    if (textBox.value.charAt(i) == '\n')
                        end ++;
                }
            }
        }
        //return [start, end]; // ���������������������������������
        // modified to return as Object
        var r= {"start": start, "end": end, "item": [start, end]};
        document.getElementById('rangeinfo').innerHTML = "start"+ start+ "	end"+ end;
        return r;
    }
 
 function changeSelection(e){
  var textarea = document.getElementById('content');
  var selection = getTextFieldSelection(textarea);
  var text = '[['+e.name+':'+selection+']]';
  insertText(textarea,text);
}
 
</script>
<title>替换文本框中选中的内容</title>
</head>
 
<body>
<input type="button" name="text" id="text" value="Text" onclick="changeSelection(this);" />
<input type="button" name="image" id="text" value="Image" onclick="changeSelection(this);" />
<input type="button" name="file" id="text" value="File" onclick="changeSelection(this);" />
<input type="button" name="media" id="text" value="Media" onclick="changeSelection(this);" />
<br />
<textarea rows="10" name="content" id="content" onkeydown="TraceCursorPosition(this)" onkeypress="TraceCursorPosition(this)" onfocus="TraceCursorPosition(this)" onblur="TraceCursorPosition(this)" onselect="TraceCursorPosition(this)" onmouseover="TraceCursorPosition(this)" onmousedown="TraceCursorPosition(this)"></textarea>

<div id="rangeinfo">
</div>
</body>
</html>